<template>
  <div>
    <el-container id="add">
      <el-header class="inside-header">
        <div>
          <!-- 面包屑 -->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>车辆备案</el-breadcrumb-item>
            <el-breadcrumb-item>运输车辆备案</el-breadcrumb-item>
            <el-breadcrumb-item class="breadcrumbColor">运输车辆备案详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main style="overflow-y:auto">
        <el-form style="background: white; padding: 20px" :model="form" label-width="120px">
          <!-- 横条 车辆进出登记 -->
          <div class="head-bar">
            <div class="head-bar-main"></div>
            <div>
              <h4>车辆进出登记</h4>
            </div>
          </div>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="出入类型">
                <el-input readonly style="width: 220px" v-model="form.typeOfAcces" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记事由">
                <el-input readonly style="width: 220px" v-model="form.register.cl_dengjishiyou" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="送/提货单位">
                <el-input readonly style="width: 220px" v-model="form.register.cl_tihuodanwei" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="运输货物">
                <el-input readonly style="width: 220px"  v-model="form.register.cargo_type"  class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输量/吨">
                <el-input readonly style="width: 220px" v-model="form.register.cl_huowushuliang" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="起运地">
                <el-input readonly style="width: 220px" v-model="form.register.cl_qiyundi" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="同行人员">
                <el-input readonly style="height: 60px; width: 640px" v-model="form.register.peers"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="受(拜)访部门">
                <el-input readonly style="width: 220px" v-model="form.bumen_type" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="受(拜)访人员">
                <el-input readonly style="width: 220px" v-model="form.bumen_name" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 横条 车辆及司机信息 -->
          <div class="head-bar">
            <div class="head-bar-main"></div>
            <div>
              <h4>车辆及司机信息</h4>
            </div>
          </div>
          <el-row>
            <el-col :span="8">
              <el-form-item label="司机姓名" required>
                <el-input readonly style="width: 220px" v-model="form.sj_name" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="司机电话" required>
                <el-input readonly style="width: 220px" v-model="form.vehicleMessage.sj_phone" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌颜色" required>
                <el-input readonly style="width: 220px" :value="form.vehicleMessage.licensePlateColor" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="车型描述">
                <el-input readonly style="width: 220px" :value="form.vehicleMessage.vehicleType" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="margin-left: 35px">
              <div class="UPtsxt"><span>行驶证正本</span></div>
                  <el-upload v-model="form.drivingLicense" class="avatar-uploader" :file-list="state.fileList" action='#'
                       :limit="1" list-type="picture-card" accept="image/png,image/jpg,image/jpeg"
                       :on-preview="selectLicense" :class="{hide:showUploadLicense}">
                        <el-icon class="avatar-uploader-icon">
                          <Plus />
                        </el-icon>
                      </el-upload>
                  </el-col>
            <el-col :span="4">
              <div class="UPtsxt"><span>行驶证副本</span></div>
                     <el-upload v-model="form.vehiclePhoto" class="avatar-uploader" :file-list="state.fileListVehicle" action='#'
                         :limit="1" list-type="picture-card" accept="image/png,image/jpg,image/jpeg"
                         :on-preview="selectV" :class="{hide:showUploadV}">
                       <el-icon class="avatar-uploader-icon">
                         <Plus />
                       </el-icon>
                     </el-upload>
            </el-col>
            <el-col :span="4">
              <div class="UPtsxt"><span>随车清单</span></div>
                     <el-upload  v-model="form.accompanyingList" class="avatar-uploader" :file-list="state.fileListAcc" action='#'
                         :limit="1" list-type="picture-card" accept="image/png,image/jpg,image/jpeg"
                         :on-preview="handlePictureCardPreviewAcc" :class="{hide:showUpload}">
                        <el-icon class="avatar-uploader-icon">
                         <Plus />
                       </el-icon>
                     </el-upload>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20" style="margin: 35px 25px">
              <el-tag class="ml-2" type="danger"
                >图片操作为本地操作,点击添加、删除或预览图片,完成后提交上传数据。</el-tag
              >
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="车牌号" required>
                <el-input readonly style="width: 220px" v-model="form.cl_cph" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="燃料类型" required>
                <el-input readonly style="width: 220px" :value="form.vehicleMessage.vehicleFuel" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="排放阶段" required>
                <el-input readonly style="width: 220px" :value="form.vehicleEmissions" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="所有人" required>
                <el-input readonly style="width: 220px" v-model="form.vehicleMessage.cl_cz" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="使用性质" required>
                <el-input readonly style="width: 220px" :value="form.vehicleMessage.natureOfVehicleUse" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="地址" required>
                <el-input readonly style="width: 650px" v-model="form.vehicleMessage.cl_dz" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="注册日期" required>
               <el-input readonly v-if="form.vehicleMessage.registernDate==null" style="width: 650px" />
                <el-input readonly v-else style="width: 650px" :value="$moment(form.vehicleMessage.registernDate).format('YYYY-MM-DD')" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发证日期" required>
              <el-input readonly v-if="form.vehicleMessage.certificateDate==null" style="width: 220px" />
                <el-input v-else style="width: 220px" :value="$moment(form.vehicleMessage.certificateDate).format('YYYY-MM-DD')" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item  label="车辆类型" required>
                <el-input readonly style="width: 220px" v-model="form.vehicleMessage.modeldescription" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="品牌型号" required>
                <el-input readonly style="width: 220px" v-model="form.vehicleMessage.cl_ppxh" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆识别代码" required>
                <el-input readonly style="width: 220px" v-model="form.vehicleMessage.cl_sbm" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核定载质量">
                <el-input readonly style="width: 220px" v-model="form.vehicleMessage.cl_hdzzl" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="发动机号码">
                <el-input readonly style="width: 220px" v-model="form.vehicleMessage.cl_fdjhm" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发动机型号">
                <el-input readonly style="width: 220px" v-model="form.vehicleMessage.cl_fdjxh" class="w-50 m-2"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否安装OBD">
                <el-input readonly style="width: 220px" v-model="form.vehicleMessage.obdInstallation" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="OBD安装日期">
                <el-input readonly v-if="form.vehicleMessage.obdInstallDate==null" style="width: 220px" />
                <el-input readonly v-else style="width: 220px" :value="$moment(form.vehicleMessage.obdInstallDate).format('YYYY-MM-DD')" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <div style="margin: 10px auto 20px">
              <el-col>
                <el-button class="empty-but" @click="close()">取消</el-button>
              </el-col>
            </div>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
     <!--行驶证正本查看图片弹出框-->
    <el-dialog v-model="LicenseDia" title="查看图片" width="50%" align-center>
        <span>
      <el-image  :src="form.drivingLicense" :preview-src-list="srcListLicense"/>
        </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary"  @click="LicenseDia = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
    <!--行驶证副本查看图片弹出框-->
    <el-dialog v-model="vehicleDia" title="查看图片" width="50%" align-center>
    <span>
      <el-image  :src="form.vehiclePhoto" :preview-src-list="srcListVehicle"/>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary"  @click="vehicleDia = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
      <!--随车清单查看图片弹出框-->
    <el-dialog v-model="accDia" title="查看图片" width="50%" align-center>
      <span>
      <el-image :src="form.accompanyingList" :preview-src-list="srcListAcc"/>
      </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary"  @click="accDia = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { UploadProps } from "element-plus";
// 路由
import { useRouter,useRoute } from "vue-router";
import {allUrl} from "@/api/upload";
import {selectAll} from "@/api/mobilePollution";
import { v3ImgPreviewFn } from "v3-img-preview";
onMounted(() => {
  selectId()
  // document.querySelector('#add')['style'].height
  //     = (document.documentElement.clientHeight - 90) + 'px';
})
const router = useRouter();
const route = useRoute();
let form = reactive(JSON.parse(localStorage.getItem("userObj")));
const accDia = ref(false)
const vehicleDia = ref(false)
const  LicenseDia =  ref(false)
// 跳转回列表页
const close = () => {
  localStorage.removeItem("userObj");
  router.push({
    path: "/transportIndex",
  });
};
// let sessionDataAcc = reactive(JSON.parse(localStorage.getItem("userObj")).vehicleMessage.accompanyingList)
// let sessionDataVehicle = reactive(JSON.parse(localStorage.getItem("userObj")).vehicleMessage.vehiclePhoto)
// let sessionDataLicense = reactive(JSON.parse(localStorage.getItem("userObj")).vehicleMessage.drivingLicense)
// const srcListAcc = [
//   sessionDataAcc
// ]
// const srcListVehicle = [
//   sessionDataVehicle
// ]
// const  srcListLicense = [
//   sessionDataLicense
// ]
//图片上传
const  showUploadLicense = ref(true)
const  showUploadV = ref(true)
const  showUpload = ref(true)
const state = reactive({
  bannerUrl: '',
  fileList: [
  ],
  fileListAcc:[
  ],
  fileListVehicle:[

  ],
  fileName: '',
})
const selectId = (clId) => {
  selectAll({cl_id:route.query.id}).then((res)=>{
    // form = res.data.list[0]
    let obj = {...res.data.list[0].vehicleMessage,...res.data.list[0].register}
    for(let key in obj){
      form[key] = obj[key]
    }
    form.vehicleEmissions = res.data.list[0].vehicleEmissions
    form.typeOfAcces = res.data.list[0].typeOfAcces
    form.bumen_type = res.data.list[0].bumen_type
    form.bumen_name = res.data.list[0].bumen_name
    form.sj_name = res.data.list[0].sj_name
    form.cl_cph = res.data.list[0].cl_cph


        if(form.drivingLicense == null){
          state.fileList = []
          showUploadLicense.value = false
        }else {
          form.drivingLicense = `${process.env.VUE_APP_BASE_API}\/${res.data.list[0].vehicleMessage.drivingLicense}`
          state.fileList=[{url:form.drivingLicense}]
          showUploadLicense.value = true
        }
        if(form.vehiclePhoto == null){
          state.fileListVehicle = []
          showUploadV.value = false
        }else {
          form.vehiclePhoto = `${process.env.VUE_APP_BASE_API}\/${res.data.list[0].vehicleMessage.vehiclePhoto}`
          state.fileListVehicle=[{url:form.vehiclePhoto}]
          showUploadV.value = true
        }
        if(form.accompanyingList == null){
          state.fileListAcc = []
          showUpload.value = false
        }else {
          form.accompanyingList = `${process.env.VUE_APP_BASE_API}\/${res.data.list[0].vehicleMessage.accompanyingList}`
          state.fileListAcc=[{url:form.accompanyingList}]
          showUpload.value = true
        }
    })
}
const selectLicense = (uploadFile) => {
  // form.drivingLicense = uploadFile.url
  // LicenseDia.value = true
  v3ImgPreviewFn(uploadFile.url)
}
const selectV = (uploadFile) => {
  // form.vehiclePhoto = uploadFile.url
  // vehicleDia.value = true
  v3ImgPreviewFn(uploadFile.url)
}
const handlePictureCardPreviewAcc = (uploadFile) => {
  // form.accompanyingList = uploadFile.url
  // accDia.value = true
  v3ImgPreviewFn(uploadFile.url)
}


</script>
<style scoped>
/* 面包屑字体颜色更改 */

.breadcrumbColor >>> .el-breadcrumb__inner {
  color: #000;
}
/* 内部header */

.inside-header {
  height: 20px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  background:#f2f4f5
}
/* 横条蓝条样式 */
.head-bar {
  width: 100%;
  height: 40px;
  display: flex;
}

.head-bar-main {
  width: 3px;
  height: 20px;
  opacity: 1;
  background: #3780b9;
  margin-right: 11px;
}
/* 文件上传文字样式 */

.UPtsxt {
  width: 120px;
  height: 30px;
}
/* 文件上传样式 */

.avatar-uploader {
  width: 120px;
  height: 120px;
  background-color: #e5f4ff;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #3780b9;
  width: 120px;
  height: 120px;
  text-align: center;
}
.avatar-img{
  width:120px;
  height:120px
}
/* 空心按钮样式 */

.empty-but {
  border: 1px solid #3780b9;
  color: #3780b9;
}
/* 实心按钮背景样式 */

.sele-but {
  background: #3780b9;
  border: 0px;
  border-radius: 2px;
  color: white;
}
/*超出限制 隐藏图片上传*/
::v-deep.hide .el-upload--picture-card {
  display: none;
}
</style>
